<template>
  <view class="staff">
    <view class="navbar">
      <uni-nav-bar fixed="true" :border="false" color="#FFF" statusBar="true" backgroundColor="#22b9a3" title="金牌陪诊师" />
    </view>
    <view class="top">
      <uni-segmented-control :current="current" :values="jobItem" @clickItem="choiceJob" styleType="text"
        activeColor="#22b9a3"></uni-segmented-control>
    </view>
    <view class="search">
      <uni-search-bar class="uni-mt-10" radius="10" placeholder="请输入姓名" clearButton="auto" cancelButton="none"
        @confirm="searchStaffByName" @blur="searchStaffByName" @clear="searchStaffByName" bgColor="#fff" />
    </view>
    <view class="content">
      <scroll-view scroll-y="true" @scrolltolower="fetchMore" class="scroll-Y">
        <view class="list">
          <view class="item" v-for="(staff,index) in staffList" :key="staff.id">
            <view class="left">
              <view class="profile">
                <image :src="staff.pic"></image>
              </view>
              <view class="tag">
                <uni-tag circle text="可以预约" type="success" />
              </view>
            </view>
            <view class="right">
              <view class="fisrt-line">
                <view class="name">
                  {{staff.name}}
                </view>
                <view class="tag">
                  <uni-tag circle size="mini" text="实名认证" type="error" />
                  <uni-tag v-if="staff.isEarnest==1" circle size="mini" text="平台认证" type="warning" />
                  <uni-tag size="mini" :text="staff.sex==1?'男':'女'" :type="staff.sex==1?'primary':'warning'" />
                </view>
              </view>
              <view class="second-line">
                <view class="tag">
                  <uni-tag inverted size="mini" :text="staff.city" type="success" />
                  <uni-tag inverted size="mini" :text="`从业${staff.lengthOld}年`" type="success" />
                </view>
              </view>
              <view class="third-line">
                个人介绍：{{staff.brief}}
              </view>
              <view @click="gotoService(staff)" class="detail">
                立即预约
              </view>
            </view>
          </view>
          <uni-load-more :status="loadStatue" iconType="circle" color="#22b9a3" />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    uselocation
  } from '@/stores/location.js';
  import {
    useParamStore
  } from '@/stores/query-param';
  import {
    ref,
    onMounted
  } from 'vue';
  const loadStatue = ref('more')
  const locationInfo = uselocation().locationInfo
  const staffList = ref([])
  const param = {
    cityCode: locationInfo.id,
    pageNo: 1,
    pageSize: 10,
    name: '',
    job: 1
  }
  onMounted(async (option) => {
    queryStaff(param)
  })
  //查询数据
  async function queryStaff(param) {
    loadStatue.value = 'loading'
    const result = await http.getRequest("/peizhen/staff/page", param)
    if (result.code == 0) {
      //当数量小于pagesize时说明没有了
      if (result.data.list.length < param.pageSize) {
        loadStatue.value = 'noMore'
      } else {
        loadStatue.value = 'more'
      }
      staffList.value = staffList.value.concat(result.data.list)
    } else {
      uni.showToast({
        title: '查询陪诊师失败',
        icon: 'error',
        duration: 1000
      })
    }
  }


  //选项卡
  const jobItem = ['陪诊师', '护工', ];
  const current = ref(0)

  function choiceJob(e) {
    //参数清理
    param.pageNo = 1;
    param.name = ''
    //列表清空
    staffList.value.length = 0
    if (e.currentIndex == 1) {
      //选择了护工
      param.job = 2;
      queryStaff(param)
    } else if (e.currentIndex == 0) {
      param.job = 1;
      queryStaff(param)
    }
  }
  //根据名字搜索
  function searchStaffByName(e) {
    param.name = e.value
    param.pageNo = 1;
    //列表清空
    staffList.value.length = 0
    queryStaff(param)
  }
  //监听滚动栏

  function fetchMore() {
    //当nomore时，不再发送请求
    if (loadStatue.value == 'noMore') {
      return
    }
    param.pageNo = param.pageNo + 1,
      queryStaff(param)
  }

  //去预约
  function gotoService(staff) {
    useParamStore().setChoiceStaff(staff)
    uni.switchTab({
      url:"/pages/project/project"
    })
    
  }
</script>

<style lang="scss" scoped>
  .staff {
    background-color: $uni-bg-color-grey;
  }

  .top {
    width: 100%;
  }

  .navbar ::v-deep .uni-nav-bar-text {
    font-size: $uni-font-size-title !important;
    font-family: "siyuan";
  }

  .search {
    width: 80%;
  }

  // .search ::v-deep .uni-searchbar__box{
  //   border: 5rpx;
  //   border-color: green;
  // }
  .content {
    margin-left: 12rpx;
    margin-right: 12rpx;
    width: 725rpx;
  }

  .item {
    background-color: $uni-bg-color;
    margin-bottom: 17rpx;
    border-radius: 15rpx;
    display: flex;
  }

  .left {
    padding-top: 15rpx;
    padding-left: 15rpx;
    padding-bottom: 15rpx;

    .profile {
      border-radius: 70rpx;
      width: 140rpx;
      height: 140rpx;
      overflow: hidden;

      image {
        width: 140rpx;
        height: 140rpx;
      }
    }

    .tag {
      width: 140rpx;
      margin: 10rpx;
    }
  }

  .right {
    padding-top: 15rpx;
    padding-left: 15rpx;
    position: relative;
    width: 535rpx;

    .fisrt-line {
      display: flex;

      .tag {
        uni-tag {
          margin-left: 10rpx;
        }
      }
    }

    .second-line {
      margin-top: 15rpx;
      display: flex;

      .tag {
        width: 300rpx;

        uni-tag {
          margin-left: 10rpx;
        }
      }

    }

    .third-line {
      margin-top: 25rpx;
      font-size: 25rpx;
      color: rgb(138, 138, 138);
    }
  }

  .detail {
    width: 118rpx;
    height: 40rpx;
    background-color: #24c373;
    border-radius: 30rpx;
    font-size: 21rpx;
    color: #fff;
    letter-spacing: 3.5rpx;
    text-align: center;
    padding-top: 10rpx;
    position: absolute;
    top: 70rpx;
    right: 20rpx;

  }

  .scroll-Y {
    height: 1100rpx;
  }
</style>